<template>
	<view class="page">
		<v-header title="用户设置" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<!--头像-->
			<view class="txCont f fn fc">
				<view class="tx" @click="chooseImage"><image :src="tximg" mode="aspectFill" class="tximg"></image></view>

				<view class="editpwd f fc" @click="toEditpwd">
					<text class="cuIcon-edit"></text>
					修改密码
				</view>
			</view>
			<!--账号-->
			<view class="setContent">
				<view class="loginBox">
					<view class="f cell">
						<label class="label">
							<text class="requierText">*</text>
							手机号:
						</label>
						<input class="fl" type="text" v-model="addquery.phone" placeholder="请输入手机号" maxlength="30" />
					</view>
					<view class="f cell">
						<label class="label">
							<text class="requierText">*</text>
							账号:
						</label>
						<input class="fl" type="text" v-model="addquery.account" placeholder="请输入账号" maxlength="30" />
					</view>
					<view class="f cell">
						<label class="label">
							<text class="requierText">*</text>
							名称:
						</label>
						<input class="fl" type="text" v-model="addquery.name" placeholder="请输入名称" maxlength="30" />
					</view>
					<view class="f cell">
						<text class="requierText"></text>
						<label class="label">简称:</label>
						<input class="fl" type="text" v-model="addquery.jcname" placeholder="简称" maxlength="30" />
					</view>
					<view class="f cell">
						<text class="requierText"></text>
						<label class="label">性别:</label>
						<picker @change="selectChange($event, 'status')" class="picker fl" :value="sexIndex" :range="sexArray" range-key="value">
							<input :value="sexArray[sexIndex].value" disabled placeholder="请选择性别" />
						</picker>
					</view>
					<view class="f cell">
						<text class="requierText"></text>
						<label class="label">邮箱:</label>
						<input class="fl" type="text" v-model="addquery.email" placeholder="请输入邮箱" maxlength="20" />
					</view>
					<view class="cu-btn block round login" @click="saveInfo">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: this.$h,
			//参数
			addquery: {
				phone: '',
				account: '',
				name: '',
				jname: '',
				sex: '',
				email: ''
			},
			tximg: '../../static/img/avatar.png', //头像
			//性别
			sexIndex: -1,
			sexArray: [
				{
					code: 0,
					value: '男'
				},
				{
					code: 1,
					value: '女'
				}
			]
		};
	},
	methods: {
		//保存信息
		saveInfo() {
			let than = this;
			let phone = than.addquery.phone || '';
			let account = than.addquery.account || '';
			let name = than.addquery.name || '';
			let jname = than.addquery.jname || '';
			let sex = than.addquery.sex || '';
			let email = than.addquery.email || '';
			var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
			var reg = new RegExp('^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'); //正则表达式
			if (!phone || phone == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return false;
			} else if (phone.length != 11) {
				uni.showToast({
					title: '请输入有效的手机号码',
					icon: 'none'
				});
				return false;
			} else if (!myreg.test(phone)) {
				uni.showToast({
					title: '请输入有效的手机号码',
					icon: 'none'
				});
				return false;
			} else if (!account || account == '') {
				uni.showToast({
					title: '请输入账号',
					icon: 'none'
				});
				return false;
			} else if (!name || name == '') {
				uni.showToast({
					title: '请输入名称',
					icon: 'none'
				});
				return false;
			} else if (email.length > 0) {
				if (!reg.test(email)) {
					uni.showToast({
						title: '请输入有效邮箱地址',
						icon: 'none'
					});
					return false;
				}
			} else {
				// uni.navigateTo({
				// 	url: '../../views/login/enterpriseInfo'
				// });
			}
		},
		//选择性别
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'status') {
				//隐患状态
				if (index >= 0) {
					than.sexIndex = index;
					than.addquery.sex = than.sexArray[index].code;
				}
			}
		},
		//选择头像
		chooseImage() {
			var that = this;
			uni.chooseImage({
				sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
				sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
				count: 1,
				success: async res => {
					var arr = [];
					// arr = await that.up_img(res.tempFilePaths[0]);
					// console.log('faj', arr);
					// that.$set(that.addquery.inspectionImgs, index, arr);
					// console.log('图片', that.addquery.inspectionImgs);
					this.tximg = res.tempFilePaths;
					// }
				}
			});
		},
		toEditpwd() {
			uni.navigateTo({
				url: '../../views/mine/editPwd'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.txCont {
	width: 100%;
	height: 330rpx;
	border-bottom: 20rpx solid #f0f0f0;

	.txview {
		width: 100%;
		height: 100%;
	}

	.tx {
		width: 180rpx;
		height: 180rpx;
		border-radius: 100%;

		margin-bottom: 20rpx;
	}

	.tximg {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.editpwd {
		width: 100%;
		font-size: 32rpx;

		.cuIcon-edit {
			color: $color;
			font-size: 40rpx;
			margin-right: 30rpx;
		}
	}
}

.setContent {
	padding-top: 30rpx;
}

.loginBox {
	.cell {
		height: 90rpx;
		margin: 0 54rpx 30rpx 54rpx;
		border-bottom: solid 1rpx $bcolor;
		font-size: 32rpx;

		.requierText {
			display: inline-block;
			width: 10rpx;
			color: #f43f3b;
			margin-right: 10rpx;
		}

		.label {
			width: 120rpx;
			margin-right: 10rpx;
		}

		input {
			height: 60rpx;
		}
	}

	.login {
		font-size: 32rpx;
		margin: 60rpx 54rpx 30rpx 54rpx;
		height: 96rpx;
		color: #fff;
		background-image: linear-gradient(to left, $color, #00aaff);
	}
}
</style>
